<template>
	<view class="u-bg-white">
		<zx-nav title="帮助中心" bg="#fff"></zx-nav>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<block v-for="(item, index) in articleList" :key="index">
				<tui-collapse :index="index" :current="item.current" :disabled="item.disabled" @click="change">
					<template v-slot:title>
						<tui-list-cell :hover="false">Q{{ index + 1 }}: {{ item.name }}</tui-list-cell>
					</template>
					<template v-slot:content>
						<view class="tui-content">
							<!-- <rich-text :nodes="item.info"></rich-text> -->
							<rf-parser :html="item.info" lazy-load></rf-parser>
						</view>
					</template>
				</tui-collapse>
			</block>
		</mescroll-body>
	</view>
</template>

<script>
import tuiCollapse from '@/components/tui-collapse/tui-collapse.vue';
import tuiListCell from '@/components/list-cell/list-cell';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import rfParser from '@/components/rf-parser/index.vue';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			articleList: []
		};
	},
	components: {
		tuiCollapse,
		tuiListCell,
		rfParser
	},
	methods: {
		change(e) {
			console.log(JSON.stringify(e));
			let index = e.index;
			let item = this.articleList[index];
			item.current = item.current == index ? -1 : index;
		},
		upCallback(mescroll) {
			this.getArticleList();
		},
		//获取文章列表
		getArticleList() {
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			let param = {
				page: pageNum,
				limit: pageSize,
				type: 12
			};
			let $me = this;
			this.$postAction(this.$api.getArticleList, param).then(da => {
				if (da.data && da.data.length > 0) {
					let curPageData = da.data;
					curPageData.forEach((item, index) => {
						item.disabled = false;
						item.current = index == 0 ? 0 : -1;
					});
					$me.mescroll.endBySize(curPageData.length, da.count);
					if ($me.mescroll.num == 1) $me.articleList = []; //如果是第一页需手动制空列表
					$me.articleList = $me.articleList.concat(curPageData); //追加新数据
				} else {
					$me.articleList = [];
					$me.mescroll.endSuccess(0, false);
				}
			});
		}
	}
};
</script>

<style lang="scss">
.tui-title {
	padding: 40rpx 30rpx 20rpx;
	box-sizing: border-box;
	font-size: 32rpx;
}

.tui-content {
	padding: 20rpx 30rpx;
	background: #fff;
	color: #939393;
	font-size: 26rpx;
}
</style>
